// 每个编辑页面都有申请单基本信息
import React, { Component } from 'react';
import LoadComp from '@c/loadComponent';
import InfoList from '@c/info-list';
import { Icon } from 'antd';
import s from './common.less';
import { connect } from 'dva';
import { offerStatus, yesORno } from '@/common/status'

@connect(s => ({
  ...s['marketing'],
  loading: s.loading.models['marketing'],
}))
class Page extends Component {
  constructor({ showAll }) {
    super()
    this.state = {
      showAll,
      hidden: !showAll,
    }
  }

  componentDidMount() {
    const { id, dispatch } = this.props;
    dispatch({
      type: 'marketing/getBaseInfo',
      id,
    });
  }

  onShowHide = () => {
    this.setState({
      hidden: !this.state.hidden,
    });
  };
  renderBtn = () => {
    const { hidden } = this.state
    return (
      <div className={s['btn-box']}>
        <div className={s['up-down-btn']} onClick={this.onShowHide}>
          {hidden
            ? <span>展开全部<Icon type="down" /></span>
            : <span>收起<Icon type="up" /></span>
          }
        </div>
      </div>
    );
  };
  renderInfo = () => {
    const { title = '报价申请单基本信息', baseInfo = {} } = this.props;
    const { hidden, showAll } = this.state;
    const {moldSharingFlag} = baseInfo
    const list = [
      { label: '单号', value: baseInfo.quoteApplyId },
      { label: '申请时间', value: baseInfo.applyTime },
      { label: '状态', value: offerStatus[baseInfo.status] },
      { label: '报价截止日期', value: baseInfo.quoteDeadline },
      { label: '客户名称', value: baseInfo.customerName },
      { label: '项目', value: baseInfo.project },
      { label: '物流到达城市', value: baseInfo.logisticsArriveCity },
      { label: '零件号', value: baseInfo.partsCode },
      { label: '零件名称', value: baseInfo.partsName },
      { label: '每车用量', value: baseInfo.carDosage },
      { label: '平均年用量', value: baseInfo.annualDosage },
      { label: '生命周期', value: baseInfo.lifeCycle },
      { label: '总产量', value: baseInfo.totalOutput },
      { label: 'SOP日期', value: baseInfo.sopDate },
      { label: 'EOP日期', value: baseInfo.eopDate },
      { label: '模具是否分摊', value: yesORno[moldSharingFlag] },
      { label: '模具分摊数量及方式', value: baseInfo.moldSharingWay },
      { label: '年降要求', value: baseInfo.annualDrop },
      { label: '捆绑要求', value: baseInfo.bindRequire },
      { label: '付款方式/周期', value: baseInfo.paymentWay },
      { label: '是否模具报价明细', value: yesORno[baseInfo.moldOfferDetails] },
      { label: '是否共同设计', value: yesORno[baseInfo.coDesign] },
      { label: '零件所属公司', value: baseInfo.belongCompanyName },
      { label: '备注', value: baseInfo.remark },
    ];
    if (moldSharingFlag===20) {
      list.splice(16, 1)
    }
    return (
      <div className={s['info-box']}>
        <InfoList title={title} data={hidden ? list.splice(0, 9) : list} />
        {!showAll && this.renderBtn()}
      </div>
    );
  };

  render() {
    const { loading } = this.props;
    return <LoadComp loading={loading}>{this.renderInfo()}</LoadComp>;
  }
  componentWillUnmount() {
    this.props.dispatch({
      type: 'marketing/unmount',
    })
  }
}

export default Page;
